<template>
  <div>
    <!-- 第一行 -->
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '10px'}">
          <div class="grid-content grid-con-1">
            <i class="el-icon-user-solid grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">1,234</div>
              <div>用户访问量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '10px'}">
          <div class="grid-content grid-con-2">
            <i class="el-icon-s-comment grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">321</div>
              <div>系统消息</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '10px'}">
          <div class="grid-content grid-con-3">
            <i class="el-icon-s-data grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">5,000</div>
              <div>数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '10px'}">
          <div class="grid-content grid-con-4">
            <i class="el-icon-s-goods grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">5,000</div>
              <div>商铺销量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="total hover-shadow">
          <div class="total-title">
            <span>
              <i class="el-icon-s-custom"></i>&nbsp;用户访问量
            </span>
            <span>1,253</span>
          </div>
          <p class="total-desc">
            <i class="el-icon-top el-icon-red"></i>15%相比昨天
          </p>
          <div class="total-graph" id="peopleTotal"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="total hover-shadow">
          <div class="total-title">
            <span>
              <i class="el-icon-s-marketing"></i>&nbsp;销量统计
            </span>
            <span>2,425</span>
          </div>
          <p class="total-desc">
            <i class="el-icon-bottom el-icon-green"></i>-37%相比昨天
          </p>
          <div class="total-graph" id="peopleTotal2"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="total hover-shadow">
          <div class="total-title">
            <span>
              <i class="el-icon-s-comment"></i>&nbsp;消息反馈
            </span>
            <span>1,864</span>
          </div>
          <p class="total-desc">
            <i class="el-icon-top el-icon-red"></i>14.5%相比昨天
          </p>
          <div class="total-graph" id="peopleTotal3"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="total hover-shadow">
          <div class="total-title">
            <span>
              <i class="el-icon-s-shop"></i>&nbsp;商铺销量
            </span>
            <span>845</span>
          </div>
          <p class="total-desc">
            <i class="el-icon-bottom el-icon-green"></i>14.5%相比昨天
          </p>
          <div class="total-graph" id="peopleTotal4"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 销售趋势  TOP商品  渠道分布 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="trend hover-shadow">
          <el-tabs v-model="activeName" class="el-tabs-mine">
            <el-tab-pane label="销售趋势" name="first">
              <span slot="label">
                <i class="el-icon-s-marketing"></i> 销售趋势
              </span>
              <div class="sell-total" id="sellEchart"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="trend hover-shadow">
          <el-tabs v-model="activeName2" @tab-click="handleClick" class="el-tabs-mine">
            <el-tab-pane label="TOP商品" name="first">
              <span slot="label">
                <i class="el-icon-s-data"></i> TOP商品
              </span>
              <div class="sell-total" id="sellEchart2"></div>
            </el-tab-pane>
            <el-tab-pane label="渠道分布" name="second">
              <div class="sell-total">渠道分布</div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <!-- 三栏  统计 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" style="height:500px;">
          <div slot="header" class="clearfix">
            <span>总量统计</span>
          </div>
          <div class="shop-progress">
            <p>商品销量</p>
            <el-progress :percentage="71.3" color="#42b983"></el-progress>
          </div>
          <div class="shop-progress">
            <p>进货</p>
            <el-progress :percentage="24.1" color="#f1e05a"></el-progress>
          </div>
          <div class="shop-progress">
            <p>退货</p>
            <el-progress :percentage="13.7"></el-progress>
          </div>
          <div class="shop-progress">
            <p>代付款</p>
            <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" style="height:500px;">
          <div slot="header" class="clearfix">
            <span>营销日历</span>
          </div>
          <el-calendar v-model="myCalender"></el-calendar>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" style="height:500px;">
          <div slot="header" class="clearfix">
            <span>最新消息</span>
            <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
          </div>
          <el-table :show-header="false" :data="todoList" style="width:100%;">
            <el-table-column width="40">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.status"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <div
                  class="todo-item"
                  :class="{'todo-item-del': scope.row.status}"
                >{{scope.row.title}}</div>
              </template>
            </el-table-column>
            <el-table-column width="60">
              <template>
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import Schart from 'vue-schart';
// import bus from '../common/bus';
export default {
  name: "dashboard",
  data() {
    return {
      activeName: "first",
      activeName2: "first",
      name: localStorage.getItem("ms_username"),
      myCalender: new Date(),
      todoList: [
        {
          title: "订单处理进程",
          status: false
        },
        {
          title: "物流进程处理",
          status: false
        },
        {
          title: "订单处理进程",
          status: false
        },
        {
          title: "物流进程处理",
          status: false
        },
        {
          title: "订单处理进程",
          status: true
        },
        {
          title: "订单处理进程",
          status: true
        }
      ],
      data: [
        {
          name: "2018/09/04",
          value: 1083
        },
        {
          name: "2018/09/05",
          value: 941
        },
        {
          name: "2018/09/06",
          value: 1139
        },
        {
          name: "2018/09/07",
          value: 816
        },
        {
          name: "2018/09/08",
          value: 327
        },
        {
          name: "2018/09/09",
          value: 228
        },
        {
          name: "2018/09/10",
          value: 1065
        }
      ],
      options: {
        type: "bar",
        title: {
          text: "最近一周各品类销售图"
        },
        xRorate: 25,
        labels: ["周一", "03-11", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            data: [234, 278, 270, 190, 230]
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160]
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120]
          }
        ]
      },
      options2: {
        type: "line",
        title: {
          text: "最近几个月各品类销售趋势图"
        },
        labels: ["6月", "7月", "8月", "9月", "10月"],
        datasets: [
          {
            label: "家电",
            data: [234, 278, 270, 190, 230]
          },
          {
            label: "百货",
            data: [164, 178, 150, 135, 160]
          },
          {
            label: "食品",
            data: [74, 118, 200, 235, 90]
          }
        ]
      }
    };
  },
  components: {
    // Schart
  },
  mounted() {
    // 访问量图表
    this.drawTotal(
      "peopleTotal",
      ["rgb(229,57,53)", "rgba(229,57,53,0.5)"],
      [1, 4, 11, 7, 13, 5, 2]
    );
    // 销量统计表
    this.drawTotal(
      "peopleTotal2",
      ["rgb(255,145,64)", "rgba(255,145,64,0.5)"],
      [1, 3, 6, 4, 7, 3, 0]
    );
    // 信息反馈表
    this.drawTotal(
      "peopleTotal3",
      ["rgb(64,158,255)", "rgba(64,158,255,0.5)"],
      [0, 5, 3, 8, 3, 4, 2]
    );
    // 商品销量
    this.drawTotal(
      "peopleTotal4",
      ["rgb(129,199,132)", "rgba(129,199,132,0.5)"],
      [1, 4, 8, 7, 3, 10, 2]
    );
    this.drawSell();
    this.drawTop();
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    }
  },
  // created() {
  //     this.handleListener();
  //     this.changeDate();
  // },
  // activated() {
  //     this.handleListener();
  // },
  // deactivated() {
  //     window.removeEventListener('resize', this.renderChart);
  //     bus.$off('collapse', this.handleBus);
  // },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // TOP商品
    drawTop(id, data) {
      // id元素唯一标识
      //  data 显示数据
      let sellEchart2 = this.$echarts.init(
        document.getElementById("sellEchart2")
      );
      let option = {
        grid: {
          top: "0"
        },
        tooltip: {
          trigger: "item",
          formatter: "占比：<br> {d}% "
        },
        legend: {
          orient: "horizontal", //vertical  horizontal
          bottom: 45,
          align: "auto",
          itemGap: 20, //水平间隔
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 14
          },
          data: ["肉蛋水产", "零食坚果", "水果饮料", "方便面", "糖果蛋糕"]
        },
        color: ["#539ae3", "#4dd0c2", "#5bd43a", "#e87537", "#e44141"],
        series: [
          {
            name: "TOP商品",
            type: "pie",
            radius: ["33%", "50%"],
            top: "-18%",
            clockwise: false,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                formatter: ["{styleA|{c}}", "{styleB|{b}}"].join("\n"),
                // formatter: "{styleA|{c}} \n 测试",
                rich: {
                  styleA: {
                    color: "#252626",
                    fontSize: 32,
                    lineHeight: 42,
                    fontWeight: "bold"
                  },
                  styleB: {
                    color: "#7d8080",
                    fontSize: 16,
                    fontWeight: "bold"
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 10,
                borderColor: "#ffffff"
              },
              emphasis: {
                borderWidth: 4,
                shadowBlur: 10,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                shadowColor: "rgba(0, 0, 0, 0.2)"
              }
            },
            data: [
              { value: 135, name: "零食坚果" },
              { value: 234, name: "水果饮料" },
              { value: 310, name: "方便面" },
              { value: 335, name: "糖果蛋糕" },
              { value: 1548, name: "肉蛋水产" }
            ]
          }
        ]
      };
      sellEchart2.setOption(option);
    },
    // 销售趋势
    drawSell(id, type, data) {
      // id元素唯一标识
      // type 图标类别
      //  data 显示数据
      let sellEchart = this.$echarts.init(
        document.getElementById("sellEchart")
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // type: "none"
            lineStyle: {
              type: "dashed",
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(64,158,255,0.2)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(64,158,255,0.2)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        },
        legend: {
          data: ["销售金额", "客单件", "订单数", "商品数"]
        },
        grid: {
          top: "7%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: ["03-11", "03-11", "03-11", "03-11", "03-11", "03-11", "03-11"],
          axisLine: {
            lineStyle: {
              width: 0
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          // type: "log",
          type: "value",
          axisLine: {
            lineStyle: {
              width: 0
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#f2f2f2"
            }
          }
        },
        series: [
          {
            name: "销售金额",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#1890ff",
              borderWidth: 2
            },
            lineStyle: {
              width: 2,
              color: "#1890ff"
            },
            data: [325, 389, 412, 463, 354, 267, 198]
          },
          {
            name: "客单件",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#ff8534",
              borderWidth: 2
            },
            lineStyle: {
              width: 2,
              color: "#ff8534"
            },
            data: [88, 99, 165, 153, 286, 389, 326]
          },
          {
            name: "订单数",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#ffca2a",
              borderWidth: 2
            },
            lineStyle: {
              width: 2,
              color: "#ffca2a"
            },
            data: [45, 67, 94, 117, 103, 81, 66]
          },
          {
            name: "商品数",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#1cd1a4",
              borderWidth: 2
            },
            lineStyle: {
              width: 2,
              color: "#1cd1a4"
            },
            data: [167, 198, 265, 319, 243, 176, 124]
          }
        ]
      };
      sellEchart.setOption(option);
    },
    // 图表
    drawTotal(id, color, data) {
      // id 元素唯一标识
      // color 颜色数组 渐变颜色
      // data 展示数据
      let peopleTotal = this.$echarts.init(document.getElementById(id));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          },
          formatter(params) {
            let item = params[0];
            return `日期：${item.name} <br> 新增：${item.data} 人`;
          }
        },
        grid: {
          top: 10,
          bottom: 10,
          left: 0,
          right: 0
        },
        xAxis: {
          type: "category",
          data: ["03/03", "03/04", "03/05", "03/06", "03/07", "03/08", "03/09"],
          show: false
        },
        yAxis: {
          type: "value",
          show: false
        },
        series: [
          {
            name: "新增用户量",
            type: "line",
            smooth: true,
            data: data,
            itemStyle: {
              color: color[0],
              borderWidth: 1
            },
            lineStyle: {
              width: 0,
              color: color[0]
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[0] // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: color[1] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };
      peopleTotal.setOption(option);
    }
    // handleListener() {
    //     bus.$on('collapse', this.handleBus);
    //     // 调用renderChart方法对图表进行重新渲染
    //     window.addEventListener('resize', this.renderChart);
    // },
    // handleBus(msg) {
    //     setTimeout(() => {
    //         this.renderChart();
    //     }, 200);
    // },
    // renderChart() {
    //     this.$refs.bar.renderChart();
    //     this.$refs.line.renderChart();
    // }
  }
};
</script>


<style>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 72px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 26px;
  font-weight: bold;
  line-height: 36px;
}

.grid-content .grid-con-icon {
  font-size: 36px;
  width: 72px;
  height: 72px;
  text-align: center;
  line-height: 72px !important;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}
.grid-con-4 .grid-con-icon {
  background: #ff8534;
}
.grid-con-4 .grid-num {
  color: #ff8534;
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.el-calendar-table .el-calendar-day {
  height: 46px;
}
.el-icon-red {
  color: #f44336;
}
.el-icon-green {
  color: #4caf50;
}
.hover-shadow:hover {
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/* 统计部分 */
.total {
  border-radius: 3px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  /* box-shadow: 0px 1px 3px rgb(0, 0, 0, 0.12); */
  padding: 10px;
}
.total-title {
  padding: 5px 10px;
  color: #666666;
  line-height: 40px;
}
.total-title span i {
  font-size: 20px;
  position: relative;
  top: 2px;
}
.total-title span:last-child {
  float: right;
  font-size: 36px;
}
.total-desc {
  clear: both;
  font-size: 12px;
  color: #9e9e9e;
  padding: 0 15px;
}
.total-graph {
  height: 80px;
}
/* 销售趋势 */
.trend {
  border-radius: 3px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  /* box-shadow: 0px 1px 3px rgb(0, 0, 0, 0.12); */
  padding: 0px 20px 20px;
}
.el-tabs-mine .el-tabs__item {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
}
.sell-total {
  height: 480px;
  padding: 15px 0 0 0;
}
/* 统计进度 */
.shop-progress {
  padding: 15px;
}
</style>
